<template>
      <div class="wrapDiv">
		<div class="wrapNav"><a class="iconBlack" @click="back" ><img src="/static/images/iconBack.png"/></a></div>
		<div class="wrapTopic"><img src="/static/images/bgImg.png"/></div>
		<div class="rulesTit"><i class="iconRule">活动规则</i></div>
		<div class="rulesCon">
			<div  class="rulesBag"><img src="/static/images/bgCon.png"/></div>		
			<div class="rules">
				<ul class="ruleList clearfix">
					<li>活动时间：{{startTime|dateTime}} 起至{{endTime|dateTime}} 止；</li>
				</ul>
                <span id="content" v-html="note"></span>
			</div>
			<div class="buttonToBuy"><a @click="openApp" title="立即购买" ><img src="/static/images/iconButton.png"/></a></div>
			<div class="wrapBot"><img src="/static/images/bgBottom.png"/></div>							
		</div>
        <open-app ref="openApp"></open-app>			
	</div>
</template>
<script>
import openApp from "./OpenApp";
import $ from "jquery";

export default {
  components: {
    openApp
  },
  name: "promotion",
  data() {
    return {
      startTime: "",
      endTime: "",
      note: ""
    };
  },
  mounted() {
    this.$http
      .post("/api/promotionInfo", { uid: this.$route.query.uid })
      .then(res => {
        const promotion = res.data.resData;
        if (promotion) {
          this.startTime = promotion["startTime"];
          this.endTime = promotion["endTime"];
          this.note = promotion["note"];
          setTimeout(() => {
            $("#content span").removeAttr("style");
            $("#content ul").addClass("ruleList clearfix");
          }, 100);
        } else {
          alert("找不到数据，请刷新重试");
        }
      });
  },
  methods: {
    openApp() {
      this.$refs.openApp.openApp([ {'field': 'uid', 'value':this.$route.query.uid }, ], "promotion",false);
    },
    back(){
       this.$refs.openApp.openApp([], "back",false);
    }
  }
};
</script>
<style>
.wrapDiv .rulesCon .rules .ruleList li {
  margin-bottom: 10px;
  list-style-type: disc;
  list-style-position: inside;
}
</style>

<style scoped>
@charset "utf-8";
/*全局样式*/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.clearfix {
  overflow: hidden;
  _zoom: 1;
}
.wrapDiv{position:relative;background:#bb1015;margin:0 auto;overflow:hidden}

.wrapDiv .wrapNav {
  position: absolute;
  z-index: 1;
  height: 50px;
  padding-left: 3%;
  padding-top: 3%;
}
.wrapDiv .wrapNav .iconBlack {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.wrapDiv .wrapNav .iconBlack img {
  width: 100%;
}
.wrapDiv .wrapTopic img {
  width: 100%;
}
.wrapDiv .rulesTit {
  position: absolute;
  z-index: 1;
  width: 100%;
  margin-top: -17%;
  text-align: center;
  overflow: hidden;
}
.wrapDiv .rulesTit .iconRule {
  display: inline-block;
  padding: 0.5em 1.5em;
  border: 2px solid #fff;
  border-radius: 20em;
  font-style: normal;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.1em;
}
.wrapDiv .rulesCon {
  margin-top: -8px;
}
.wrapDiv .rulesCon .rulesBag {
  width: 100%;
  z-index: 1;
}
.wrapDiv .rulesCon .rulesBag img {
  width: 100%;
  z-index: 1;
}
.wrapDiv .rulesCon .rules {
  margin-top: -110%;
  z-index: 2;
  padding: 0.3em 7%;
  color: #fff;
  font-size: 1.2em;
}

.wrapDiv .buttonToBuy {
  width: 120px;
  height: 120px;
  margin: 10px auto;
}
.wrapDiv .buttonToBuy img {
  width: 100%;
}
.wrapDiv .wrapBot {
  width: 100%;
}
.wrapDiv .wrapBot img {
  width: 100%;
}
</style>

